<template>
	<view :class="['otc',{'dark':theme=='dark'}]">
		<view :class="['bglist3','funs',{'darksss':theme=='dark'}]">
			<view class="wrap">

				<!-- 修改样式 -->
				<u-gap height="20" bg-color=""></u-gap>
				<u-table border-color="#22253c00" bg-color="#22253c00" align="left" padding="14rpx 0" v-for="(item,index) in dataList"
					:key="index">
					<view :class="['juzonucom','tool-card',{'darksss':theme=='dark'}]">

						<view :class="['wrap','juzonucg',{'darksss':theme=='dark'}]">
							<u-tr>
								<u-td>
									<view class="fuwen">{{item.buyName.substring(0,1)}}</view>
								</u-td>
								<u-td class="juzonuc">
									<view></view>
								</u-td>
								<u-td class="juzon">
									<view class="fuwenn">{{item.buyName}}</view>
								</u-td>
							</u-tr>
						</view>

						<u-line color="#5559691f"></u-line>
						<u-gap height="20" bg-color=""></u-gap>

						<u-tr>
							<u-td>{{$t('bico.W39')}}</u-td>
							<u-td class="juzonuc"></u-td>
							<u-td class="juzon">{{item.unitPrice}} CNY</u-td>
						</u-tr>

						<u-tr>
							<u-td>{{$t('bico.W40')}}</u-td>
							<u-td class="juzonuc"></u-td>
							<u-td class="juzon">{{item.number}} USDT</u-td>
						</u-tr>
						<u-tr>
							<u-td>{{$t('bico.W41')}}</u-td>
							<u-td class="juzonuc"></u-td>
							<u-td class="juzon">{{item.cny}} CNY</u-td>
						</u-tr>
						<u-tr>
							<u-td>{{$t('bico.W42')}}</u-td>
							<!-- <u-td class="juzonuc"></u-td> -->
							<u-td class="juzon">{{item.createTime}}</u-td>
						</u-tr>
						<u-tr>
							<u-td>{{$t('bico.W43')}}</u-td>
							<u-td class="juzonuc"></u-td>
							<u-td class="juzon">{{item.orderNo}}</u-td>
						</u-tr>

						<u-line color="#5559691f"></u-line>
						<u-tr>
							<u-td>
								<!-- 支付宝 -->
								<u-col span="1" v-if="item.payMethod == 'ALI_PAY'">
									<view class="">
										<image class="funsItemImage" src="../../static/business/zfb.png"></image>
									</view>
								</u-col>
								<!-- 微信 -->
								<u-col span="1" v-if="item.payMethod == 'WE_CHAT'">
									<view class="">
										<image class="funsItemImage" src="../../static/business/wx.png"></image>
									</view>
								</u-col>
								<!-- 银行卡 -->
								<u-col span="1" v-if="item.payMethod == 'BANK'">
									<view class="">
										<image class="funsItemImage" src="../../static/business/yhk.png"></image>
									</view>
								</u-col>
							</u-td>

							<u-td class="juzonuc">

							</u-td>
							<u-td class="juzon">
								<view class="">
									<u-button v-if="item.status == 'WAIT'" size="mini" @click="funsItemClick(item,1)"
										plain>{{$t('bico.W44')}}</u-button>
									<u-button v-if="item.status != 'WAIT'" size="mini" @click="funsItemClick(item,1)"
										plain>{{statusMap[item.status]}}</u-button>
								</view>
							</u-td>
						</u-tr>
					</view>
					<u-gap height="20" bg-color=""></u-gap>
				</u-table>
				<!-- 修改样式 -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		domain
	} from '@/common/domain.js'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {
		otcBillList,
		tradeBuyWaitPage
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				statusMap: {
					'WAIT': this.$t('bico.W45'),
					"WAIT_COIN": this.$t('bico.W46'),
					"FINISH": this.$t('bico.W47'),
					"APPEAL": this.$t('bico.W48'),
					"CANCEL": this.$t('bico.W49'),
				},
				dataList: []
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad() {
			
			//下面一行就是设置上面标题的代码，复制修改括号里的标题，放在页面的onLoad()方法里最后面就可以了，
			this.$utils.setTitle(this.$t('bico.W107'),)
			
			//下面这三行注释的代码
			// uni.setNavigationBarTitle({
			// 	title: this.$t('login').otc
			// })
			
			this.$utils.setTheme(this.theme);
		},
		onShow() {
			this.getData()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			//路由开始
			funsItemClick(item, index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/otc/Orderdetails2?orderNo=' + item.orderNo + "&myType=0" //订单详情
					})
				};
			},
			getData() {
				this.$utils.initDataToken({
					url: otcBillList,
					data: {
						pageType: 'BUY',
						status: '',
						current: '1',
						size: "10"
					},
					type: 'POST'
				}, (res, msg) => {
					this.dataList = res.records
				})
			}
			//路由结束
		},

	}
</script>

<style lang="scss">
	page {
		background: #f8f8f99c;
	}

	.otc {
		width: 100%;
		height: 100%;

		.bglist1 {
			background: #3e38ec;
			height: 20vw;
		}

		.bglist2 {
			display: flex;
			height: 40px;
			line-height: 40px;
			background: #ffffff;
			position: relative;
			top: -8vw;
			border-top-left-radius: 3vw;
			border-top-right-radius: 3vw;
		}

		.bglist3 {
			position: relative;
			top: 0vw;
		}

		.side {
			position: absolute;
			top: 2vw;
			right: 0;
			left: 90vw;
		}

		.wrap {
			padding: 2vw;
		}

		.u-row {
			margin: 2vw 0;
		}

		.demo-layout {
			height: 8vw;
			border-radius: 8rpx;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.income-card {
			width: 100%;
			background-color: #fff;
			border-radius: 1vw;
			padding: 2px;
			margin-top: 10px;
		}

		.bic {
			position: relative;
			top: 0vw;
			right: -16vw;
			color: #b7b8bd;
			font-size: 3vw;
		}

		.apt {
			padding: 2vw 0;
		}

		.aptp {
			position: relative;
			top: 0vw;
			right: -20vw;
			padding: 2vw 0;
		}



		.aptpp {
			position: relative;
			top: 0vw;
			text-align: right;
			//right: -12vw;
		}

		.tpc {
			font-size: 3.4vw;
			font-weight: 700;
			color: #F44336;

		}

		.tpcc {
			font-size: 3.4vw;
			font-weight: 700;
			color: #4CAF50;
		}

		.funsItemImage {
			position: relative;
			top: 0vw;
			width: 6vw;
			height: 6vw;
			border-radius: 0%;
		}

		.gman {
			position: relative;
			width: 55%;
			//right: 0;
			text-align: right;
		}

		.tit uni-image {
			width: 5px;
			height: 10px;
			position: relative;
			top: 0vw;
			right: -26vw;
			color: #b7b8bd;
			font-size: 3vw;
		}














		.juzon {
			text-align: right !important;
		}

		.juzonuc {

			position: relative;
			top: 0vw;
			left: 7vw;
		}

		.juzonucg {
			text-align: left;
			font-size: 14px;
			padding: 0px 2px;
			font-weight: 600;
		}

		.juzonucom {
			border: 0.5px solid #7079ab24;
			border-radius: 8px;
			padding: 0px 10px;
		}
		.juzonup {
			text-align: right !important;
			position: relative;
			top: -2vw;
			left: 22vw;
		}

		.tool-card {
			background-color: #ffffff;
		}

		.fuwen {
			color: #ffffff;
			background-color: #2979ff;
			width: 25px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			font-size: 16px;
			font-weight: 400;
			border-radius: 30px;
		}

		.fuwenn {
			line-height: 25px;
			font-size: 16px;
			font-weight: 400;
		}


	}
</style>
